<template>
    <div class="activity_item" @click="viewActivity">
        <div class="activity_item_main">
            <h3 class="activity_item_title">{{ activityItem.activityTitle }}</h3>
            <small class="activity_item_desc">{{ activityItem.activityDesc }}</small>
            <div class="activity_bottom">
                <span class="activity_author">
                    <img :src="activityItem.sponsor.picture != null ? activityItem.sponsor.picture
                    : require('@/assets/img/avatar.png')" alt="">
                    <small>&nbsp; {{ activityItem.sponsor.nickname }}</small>
                </span>
                <span>
                    <!-- 参与人数 -->
                    <el-icon>
                        <View />
                    </el-icon><small>&nbsp; {{ activityItem.participantList.length }} 人参与</small>
                </span>
                <span>
                    <!-- 活动状态 -->
                    <!-- <el-icon>
                        <ChatDotSquare />
                    </el-icon><small>&nbsp; {{ activityItem.activityStatus }}</small> -->
                </span>
                <span>
                    <!-- 参与要求 -->
                    <el-icon>
                        <ChatDotSquare />
                    </el-icon><small>&nbsp; {{ activityItem.activityExtent }} 可参与</small>
                </span>
                <span>
                    <el-icon>
                        <Calendar />
                    </el-icon><small>&nbsp;
                        {{ dateFormat(activityItem.activityDate, 'yyyy-MM-dd hh:mm:ss') }}</small>
                </span>
            </div>
        </div>
        <!-- <img class="activity_img" alt=""> -->
    </div>
</template>

<script>
import { dateFormat } from '../assets/js/dateformat.js'
export default {
    props: {
        activityItem: Object
    },
    data() {
        return {
            dateFormat: dateFormat
        }
    },
    methods: {
        viewActivity() {
            window.open(document.location.origin + '/activity.html?id=' + this.activityItem.activityId)
        }
    }
}
</script>

<style scoped>
.activity_item {
    display: flex;
    overflow: hidden;
    cursor: pointer;
    justify-content: space-between;
}

.activity_img {
    height: 120px;
    width: 120px;
}

.activity_bottom {
    display: flex;
    align-items: center;
    overflow: hidden;
}

.activity_bottom span {
    margin: 0 10px;
    height: fit-content;
    display: flex;
    align-items: center;
}

.activity_author img {
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 50%;
}

.activity_item_main {
    display: flex;
    padding-right: 10px;
    justify-content: space-between;
    flex-direction: column;
    align-content: center;
}

.activity_item_title {
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.activity_item_desc {
    -webkit-line-clamp: 4;
    overflow: hidden;
    margin: 20px 0;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    text-indent: 28px
}
</style>